<template>
	<div>
		<v-header :headerLeftText="leftText" :headerCenterText="headerText"></v-header>

		<div class="container my_order bgd_color_gray">
			<div class="line_height86 bgd_color_white margin_bot14 pad_lr26 overflow_hide">
				<div @click="quanbu" v-bind:class="{active: isActive0}" class="tab_li">
					<div class="tab_li_inner">
						全部
					</div>
				</div>
				<div @click="daifu" v-bind:class="{active: isActive1}" class="tab_li">
					<div class="tab_li_inner">
						待确认
					</div>
				</div>
				<div @click="fahuo" v-bind:class="{active: isActive2}" class="tab_li">
					<div class="tab_li_inner">
						待发货
					</div>
				</div>
				<div @click="shouhuo" v-bind:class="{active: isActive3}" class="tab_li">
					<div class="tab_li_inner">
						待收货
					</div>
				</div>
				<div @click="pingjia" v-bind:class="{active: isActive4}" class="tab_li">
					<div class="tab_li_inner border_none">
						待评价
					</div>
				</div>
			</div>
			<div v-show="orders.length>0" v-for="item in orders" class="good_li_wrap bgd_color_white border_bot1">
				<div class="f_size20 overflow_hide pad_lr20">
					<div class="left">订单编号：{{item.tradeNo}}</div>
					<div class="right f_color_main">{{item.status}}</div>
				</div>
				<div class="overflow_hide padding_tb24">
					<div class="left pad_lr15">
						<img class="pic_h_w114" :src="src+item.pic" />
					</div>
					<div class="left product_descript_wrap f_size22">
						<div class="product_descript">
							{{item.goodsName}}
						</div>
						<div class="product_size f_color_gray0">
							{{item.standard}}
						</div>
						<div class="product_price f_color_gray0">
							￥{{item.goodsPrice}}
						</div>
						<div class="product_num f_color_gray0">
							&times;{{item.goodsNum}}
						</div>
					</div>
				</div>
				<div class="overflow_hide f_size20 pad_lr20">
					<div class="right">
						合计：{{(item.goodsNum*item.goodsPrice).toFixed(2)}} （免运费）
					</div>
					<div class="right">
						共{{item.goodsNum}}件商品
					</div>
				</div>
				<div class="line_height86 height86 border_top1 pad_lr20">
					<div class="right">
						<button @click="checkLogistics(item.tradeNo)" v-show="item.status === '已发货'" class="f_size24 border_radius10 padding_tb10_lr20 border1">查看物流</button>
						<router-link :to="{name: 'EvaluateOrder', query: {tradeNo: item.tradeNo}}">
							<button v-show="item.status === '已签收'" class="f_size24 border_radius10 padding_tb10_lr20 border1">评价订单</button>
						</router-link>
						<button @click="putOrderStatus(item.tradeNo, 4)" v-show="item.status === '已发货'" class="f_size24 border_radius10 padding_tb10_lr20 border1">确认收货</button>
						<button @click="deleteBtn(item.id)" v-show="item.status === '已下单'" class="f_size24 border_radius10 padding_tb10_lr20 border1">删除订单</button>
					</div>
				</div>
			</div>
			<div v-show="orders.length==0" class="container bgd_color_gray">
				<div class="empty_car_wrap text_center">
					<img src="../static/images/empty_order_icon.png" />
					<p class="f_size22 f_color_gray0">还没有相关订单！</p>
					<router-link to="/">
						<button class="pad_lr26 f_size22">返回商城</button>
					</router-link>
				</div>
			</div>
		</div>
		<mt-popup v-model="popupVisible" popup-transition="popup-fade">
			<div class="model_wuliu">
				<div v-for="item in wuliulist" class="f_size22">
					<div class="">
						{{item.context}}
					</div>
					<div class="">
						{{item.ftime}}
					</div>
				</div>
			</div>
		</mt-popup>
	</div>
</template>
<script>
	export default {
		created() {
			var self = this
			var sta = this.$route.query.sta
			if(sta === 'undefined') {
				sta = 0
			}
			self.initPage(sta)
		},
		data() {
			return {
				leftText: '',
				headerText: '我的订单',
				orders: [],
				src: this.$src,
				isActive0: true,
				isActive1: false,
				isActive2: false,
				isActive3: false,
				isActive4: false,
				status: '',
				wuliulist: [],
				popupVisible: false,
			}
		},
		methods: {
			quanbu: function() {
				this.initPage(0)
			},
			daifu: function() {
				this.initPage(1)
			},
			fahuo: function() {
				this.initPage(2)
			},
			shouhuo: function() {
				this.initPage(3)
			},
			pingjia: function() {
				this.initPage(4)
			},
			putOrderStatus: function(tradeNo, status) {
				var self = this
				MessageBox.confirm('确定收货?').then(action => {
					this.$api.put('front/orders/received/' + tradeNo, {
						status: status
					}, r => {
						self.$router.go(0)
					})

				}).catch(action => {

				})

			},
			checkLogistics: function(tradeNo) {
				this.$api.get('/front/orders/express', {
					tradeNo: tradeNo
				}, r => {
					this.wuliulist = r
					this.popupVisible = true
				})
			},
			deleteBtn: function(id) {
				var self = this
				MessageBox.confirm('删除该订单?').then(action => {
					self.$api.delete('/front/orders/' + id, r => {
						console.log('删除订单r', r)
					})
					setTimeout(function() {
						self.$router.go(0)
					}, 500)
				}).catch(action => {

				})
			},
			initPage: function(num) {
				var self = this
				switch(num) {
					case 0:
						self.isActive0 = true
						self.isActive1 = false
						self.isActive2 = false
						self.isActive3 = false
						self.isActive4 = false
						break;
					case 1:
						self.isActive0 = false
						self.isActive1 = true
						self.isActive2 = false
						self.isActive3 = false
						self.isActive4 = false
						break;
					case 2:
						self.isActive0 = false
						self.isActive1 = false
						self.isActive2 = true
						self.isActive3 = false
						self.isActive4 = false
						break;
					case 3:
						self.isActive0 = false
						self.isActive1 = false
						self.isActive2 = false
						self.isActive3 = true
						self.isActive4 = false
						break;
					case 4:
						self.isActive0 = false
						self.isActive1 = false
						self.isActive2 = false
						self.isActive3 = false
						self.isActive4 = true
						break;
					default:
						return 0
				}

				this.$api.get('/front/orders', {
					status: num
				}, r => {
					console.log('初始化方法num', num)
					console.log('初始化方法r', r)
					this.orders = r.data.list
				})
			}
		}
	}
</script>

<style scoped>
	body {
		background: #dcdcdc;
	}
	
	.container {
		margin-bottom: 82px;
	}
	
	.myDialog {
		background: #dcdcdc;
	}
</style>